<template>
  <div class="detail-wrapper">
    <header>
      <i class="fa fa-angle-left" @click="goBack"></i>
      <p>反馈信息详情</p>
    </header>

    <div class="detail-content" v-if="feedbackDetail">
      <div
        class="air-title"
        :style="{
          borderLeftColor: gradeColor(feedbackDetail.estimatedGrade),
          color: gradeColor(feedbackDetail.estimatedGrade)
        }"
      >
        {{ gradeLabel(feedbackDetail.estimatedGrade) }} - {{ feedbackDetail.aqi?.aqiExplain || '暂无空气质量说明' }}
      </div>

      <div class="info-item">
        <span>📅 日期：</span>{{ feedbackDetail.afDate || '暂无' }}
      </div>
      <div class="info-item">
        <span>⏰ 时间：</span>{{ feedbackDetail.afTime || '暂无' }}
      </div>
      <div class="info-item">
        <span>🏞️ 省份：</span>{{ feedbackDetail.gridProvince?.provinceName || '暂无' }}
      </div>
      <div class="info-item">
        <span>🏙️ 城市：</span>{{ feedbackDetail.gridCity?.cityName || '暂无' }}
      </div>
      <div class="info-item">
        <span>📝 详情：</span>{{ feedbackDetail.information || '暂无内容' }}
      </div>
    </div>

    <div v-else class="loading">
      <p>正在加载详细信息，请稍候...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";

const router = useRouter();
const route = useRoute();
const feedbackDetail = ref(null);

// 🌟 颜色映射
const gradeColor = (grade) => {
  const colorMap = {
    1: '#00FF00',  // 绿色
    2: '#FFFF00',  // 黄色
    3: '#FFA500',  // 橙色
    4: '#FF0000',  // 红色
    5: '#800080',  // 紫色
    6: '#A52A2A'   // 褐红色
  };
  return colorMap[grade] || '#999';
};

// 🌟 文字映射
const gradeLabel = (grade) => {
  const labelMap = {
    1: '一级',
    2: '二级',
    3: '三级',
    4: '四级',
    5: '五级',
    6: '六级'
  };
  return labelMap[grade] || '未知等级';
};

// 🌟 请求详情
//const baseUrl = import.meta.env.MODE === 'production' ? '/nepm' : '';

const fetchFeedbackDetail = async () => {
  const id = route.params.id;
  try {
    const response = await axios.get(`aqiFeedback/detail/${id}`);
    feedbackDetail.value = response.data;
  } catch (error) {
    console.error(error);
    router.push('/feedbackList');
  }
};

// 🌟 返回
const goBack = () => {
  router.go(-1);
};

onMounted(fetchFeedbackDetail);
</script>

<style scoped>
.detail-wrapper {
  padding: 2vw;
  font-family: Arial, sans-serif;
}

header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2vw;
  margin-bottom: 2vw;
}


header i {
  font-size: 4vw;
  cursor: pointer;
  color: #333;
}

header p {
  font-size: 3.8vw;
  font-weight: 700;
  color: #333;
}

.detail-content {
  background-color: #ECF5FF;
  border-radius: 1vw;
  padding: 2vw;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.air-title {
  font-size: 4vw;
  font-weight: bold;
  padding-left: 2vw;
  border-left: 3vw solid;
  margin-bottom: 2vw;
  transition: border-color 0.3s, color 0.3s;
}

.info-item {
  font-size: 3.2vw;
  color: #555;
  margin: 1vw 0;
  display: flex;
  align-items: center;
}

.info-item span {
  margin-right: 1vw;
  font-weight: 600;
  color: #333;
}

.loading {
  text-align: center;
  padding: 4vw;
  font-size: 3.5vw;
  color: #888;
}
</style>
